import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import { init } from './utils/requests'
import App from './containers/App';
// import MyPage from './pages/MyPage';
// import { Router, Route, Link, hashHistory } from 'react-router'
import { Route, HashRouter as Router } from 'react-router-dom';
import Detail from './containers/Test'
import AssistantDialog from './containers/Assistant/ViewDialog';
import DocumentAssistDialog from './containers/DocumentAssistDialog';
import DocumentTemplateDialog from './containers/WordTemplate/DocumentTemplateDialog';
import Assistant from './containers/Assistant'
import Loading from './components/Loading'
import Toast from './components/Toast'

import './styles.less';
import 'office-ui-fabric-react/dist/css/fabric.min.css';

initializeIcons();
init()

let isOfficeInitialized = false;

const title = 'word-add-in';

const render = (Component) => {
  // <Component title={title} isOfficeInitialized={isOfficeInitialized} />

  ReactDOM.render(
    <AppContainer>
      <React.Fragment>
        <Router>
          <div>
            <Route exact path="/" component={() => <Component title={title} isOfficeInitialized={isOfficeInitialized} />} />
            <Route path="/documentDialog" component={DocumentAssistDialog} />
            <Route path="/documentTemplateDialog" component={DocumentTemplateDialog} />
            <Route path="/assistantDialog" component={AssistantDialog} />
            <Route path="/assistant" component={Assistant} />
            <Route path="/detail" component={Detail} />
          </div>
        </Router>
        <Loading ref={c => { let that: any = window; that._loading = c }} />
        <Toast ref={c => { let that: any = window; that._toast = c }} />
      </React.Fragment>
    </AppContainer>,
    document.getElementById('container')
  );
};

/* Render application after Office initializes */
Office.initialize = () => {
  // isOfficeInitialized = true;
  if (!Office.context.requirements.isSetSupported('WordApi', 1.1)) {
    isOfficeInitialized = false;
  } else {
    isOfficeInitialized = true;
  }
  render(App);
};

/* Initial render showing a progress bar */
render(App);

if ((module as any).hot) {
  (module as any).hot.accept('./containers/App', () => {
    const NextApp = require('./containers/App').default;
    render(NextApp);
  });
}
